import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
import fileType from '../component/file-type'
import TableControls from '#cpt/temp/TableControls'
// ===================================================================== global declare
const { $fn, $http, $Lazy } = window
// ===================================================================== $Lazy
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
// const BtnGroup 			= $Lazy.load(()=>import('#tp/btn-group'))
const NewFolderModal	= $Lazy.state(()=>import('../component/new-folder-modal'))
const MoveModal			= $Lazy.state(()=>import('../component/move-modal'))
const UploadFileModal	= $Lazy.state(()=>import('../component/upload-file-modal'))
const EmpowerModal		= $Lazy.state(()=>import('../component/empower-modal'))
const ShareModal		= $Lazy.state(()=>import('../component/share-modal'))
const ShareRecordModal	= $Lazy.state(()=>import('../component/share-record-modal'))
const TableMenu			= $Lazy.state(()=>import('../component/table-menu'))
// ===================================================================== data
// ===================================================================== component
class Index extends React.Component{
	state={
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:[],
		forms : [
			{ label: '文件名',		name: 'file_name' },
		],
		title:'',
		isPower:true
	}
	query = {}
	submit = {}
	model = {}
	
	componentDidMount(){
		// this.id = this.props.id
		let { id, title } = $fn.query()
		this.id = id
		title = $fn.decode(title)
		this.setState({title})
		this.fetch()
	}
	
	
	// paging
	fetch = () => $fn.fetch.call(this,'doc-file-folder/index',{param:{id:this.id}})
	cols = [
		{ title: '名称', 		dataIndex: 'file_name', 		...fileType() },
		{ title: '时间', 		dataIndex: 'created_at', 		...$fn.table.time, },
		{ title: '来源', 		dataIndex: 'source', 			width:100 },
		{ title: '所属文件夹',	dataIndex: 'folder_name', 		width:150 },
		{ title: '版本', 		dataIndex: 'version', 			width:100 },
		{ title: '类型', 		dataIndex: 'file_type', 		width:100 },
		{ title: '大小', 		dataIndex: 'file_size', 		width:100 },
		TableControls.controls.call(this,{ width: 148 }),
	]
	
	table_controls = (text,{uuid,is_share}) => {
		return [
			+is_share && Controls.click.call(this,'共享记录',()=> this.shareRecordRef.open(uuid,false)),
			+is_share && Confirm.call(this, '取消共享', 'doc-file-share/cancel',{query:{uuids:[uuid]}}),
		]
	}
	
	controls = () => {	// 操作按钮
		const { selectedKeys, selectedRows } = this.state
		let uuids = []
		selectedRows.forEach(v=>{
			if(+v.is_share){
				uuids.push(v.uuid)
			}
		})
		return [
			Controls.click.call(this, '上传文件', ()=> this.uploadFileModal.open(this.id), {} ),
			Controls.click.call(this, '新建文件夹', ()=> this.newFolderModal.open(this.id) ),
			Controls.click.call(this,'下载文件',() => {
				$http.submit(null,'doc-file-list/download',{param:{uuids:selectedKeys}}).then((data)=>{
					data.forEach(v=>window.open(v))
				})
			}, {isKeys:true}),
			Confirm.call(this, '删除文件', 'doc-file-list/del', 	{isKeys:true,idStr:'uuids'}),
			// Controls.click.call(this, '共享', ()=> this.shareModal.open(selectedKeys), {isKeys:true} ),
			Controls.click.call(this, '移动', ()=> this.moveModal.open(selectedKeys), {isKeys:true} ),
			Controls.click.call(this, '共享', ()=> this.empowerModal.open(selectedRows), {isKeys:true} ),
			Confirm.call(this, '取消共享', 'doc-file-share/cancel',{disabled:uuids.length>0?false:true,query:{uuids}}),
		]
	}
	expands = () => [
		{ label:'刷新', code:'F9', ghost:true, onClick: ()=>{ 
			this.searchFormRef.reset()
			this.fetch()
		} },
	]
	
	render(){
		const {title} = this.state
		return (
			<>
				<Page title={title} controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this, {noReset:true}) }
					{/* 表格 */}
					{ Table.call(this,{onMenu:(e,row,index)=>this.tableMenuRef?.open(e,row,this.id,this.current),
						// onChange:(current, pageSize) => {
						// 	this.current = current
						// 	this.pageSize = pageSize
						// 	$fn.pageChange.call(this,{current, pageSize})
						// }
					})}
				</Page>
				{/* 上传文件 */}
				<UploadFileModal onRef={ref=>this.uploadFileModal=ref} onRefresh={this.fetch} />	
				{/* 新建文件夹 */}
				<NewFolderModal onRef={ref=>this.newFolderModal=ref} />
				{/* 移动 */}
				<MoveModal onRef={ref=>this.moveModal=ref} onRefresh={this.fetch} />
				{/* 授权 */}
				<EmpowerModal onRef={ref=>this.empowerModal=ref} onRefresh={this.fetch} />
				{/* 共享 */}
				<ShareModal onRef={ref=>this.shareModal=ref} />
				{/* 共享记录 */}
				<ShareRecordModal onRef={ref=>this.shareRecordRef=ref } onRefresh={this.fetch} isPower={true} />
				{/* 右击鼠标 菜单 */}
				<TableMenu onRef={ref=>this.tableMenuRef=ref} {...this.props} onRefresh={this.fetch} showEmpower={true} showEdit={true} folder={true} />
			</>
		)
	}
}
export default Index